<template >
  <div class="body " >
    <div class="topDiv">
      <img src="../../assets/khImg/logo.png" alt="">
      <el-button   @click="tuichu">退出</el-button>
    </div>
    <div class="divbottom">
      <div class="neirong">

        <div @mouseenter="changeActive($event)" @mouseleave="removeActive($event)" class="neirongdiv yidinv" v-for="item in dataList">
          <div class="shang"><b>{{item.programmeName}}</b> </div>
          <div class="zhong">
            <img v-show="item.pattern==0" src="../../assets/khImg/kaishi.png" alt="">
            <img v-show="item.pattern==1" src="../../assets/khImg/pfwc.png" alt="">
            <img v-show="item.pattern==2" src="../../assets/khImg/jxpf.png" alt="">
            <img v-show="item.pattern==3" src="../../assets/khImg/pjwc.png" alt="">
          </div>
          <div class="xia">
            <el-button  @click="homeBtn(item)">{{item.status.name}}</el-button>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import request from '@/utils/request'
  import Cookies from "js-cookie";

  export default {
    name: "home",
    data() {
      return {
        loading:false,
        dataList:[]
      };
    },

    created() {
      window.addEventListener("popstate", function(e) {
        // alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
        var state = {
          title: "主页",
          url: "homePage"
        };
        window.history.pushState(state, "主页", "homePage");
      }, false);
      this.getList()
    },
    methods: {
      changeActive($event) {
        $event.currentTarget.className = 'neirongdivHG';
      },
      removeActive($event) {
        $event.currentTarget.className = 'neirongdiv';
      },
      //退出
      tuichu:function(){
        this.$confirm('此操作将退出系统, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
         this.tcBtn()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          });
        });
      },
      tcBtn:function(){
        this.loading = true
        request({
          url: '/logout',
          method: 'post'
        }).then(response => {
          this.$message({
            type: 'success',
            message: '退出成功!'
          });
          Cookies.remove("Admin-Token");
          Cookies.remove("khm");
          this.$router.push('/loginKH');
        });
      },
      //按钮点击
      homeBtn:function(row) {
        console.log('路由',row)
        this.$router.push(row.router);
        this.$router.push({ path: row.router,query:{data:row.programmeId}})
      },
      //获取列表数据
      getList:function() {
        this.loading = true
        request({
          url: '/kh/fe/programme',
          method: 'get',
        }).then(response => {
          this.loading = false;
          this.dataList = response.data
          for (let i = 0; i < this.dataList.length; i++) {
            let pattern = parseInt(this.dataList[i].pattern);
            let router ;
            switch (pattern) {
              case 0:
                router = '/leadershipPF'//领导
                break
              case 1:
                router = '/leadershipPFCY'//领导
                break
              case 2:
                router = '/choosePerson'//选用人
                break
              case 3:
                router = '/theNewPromotion'//新提拔干部
            }
            this.dataList[i].router = router
          }
        });
      },

    }
  };
</script>

<style  lang="scss" scoped>
  .body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-image: url("../../assets/khImg/beijing.jpg");
    background-size: cover;
    .topDiv {
      z-index: 10;
      position: fixed;
      left: 0;
      top: 0px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 94px;
      background-color: #ffffff;
      box-shadow: 0px 1px 6px 0px
      rgba(0, 10, 15, 0.4);
      img {
        margin-left: 40px;
        width:720px;
        height: 67px;
      }
      .el-button {
        margin-right: 60px;
        width: 85px;
        height: 40px;
        background-color: #0186d1;
        border-radius: 6px;
        font-family: MicrosoftYaHei;
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
      }
    }
    .divbottom {
      position: relative;
      height: 100%;
      width: 100%;
      .neirong {
        position: absolute;
        margin: auto;
        top: 0; left: 0; bottom: 0; right: 0;
        width: 100%;
        height: 518px;
        display: flex;
        align-items: center;
        justify-content: center;
        .neirongdivHG {
          width: 417px;
          height: 518px;
          margin-right: 44px;
          border-radius: 16px;
          position: relative;
          background-color: #b4bccc;
          .shang {
            height: 45px;
            width: 100%;
            text-align: center;
            line-height: 45px;
            font-family: MicrosoftYaHei-Bold;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: white;
            b {
              padding-top: 15px;
              padding-bottom: 14px;
              padding-left: 8px;
              padding-right: 8px;
              background-color: #1b95d3;
              border-radius: 0px 0px 12px 12px;
            }
          }
          .zhong {
            margin-top: 69px;
            text-align: center;
            background-color: #b4bccc;
            img {
              width: 247px;
              height: 273px;
            }
          }
          .xia {
            margin-top: 36px;
            text-align: center;
            .el-button{
              width: 180px;
              height: 60px;
              background-color: #0186d1;
              border-radius: 16px;
              font-family: MicrosoftYaHei;
              font-size: 24px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 20px;
              letter-spacing: 0px;
              color: #ffffff;
            }
          }
        }
        .neirongdiv {
          width: 417px;
          height: 518px;
          background-color: #ffffff;
          border-radius: 16px;
          margin-right: 44px;
          .shang {
            height: 45px;
            width: 100%;
            text-align: center;
            line-height: 45px;
            font-family: MicrosoftYaHei-Bold;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #000000;
          }
          .zhong {
            margin-top: 69px;
            text-align: center;
            img {
              width: 247px;
              height: 273px;
            }
          }
          .xia {
            margin-top: 36px;
            text-align: center;
            .el-button{
              width: 180px;
              height: 60px;
              background-color: #0186d1;
              border-radius: 16px;
              font-family: MicrosoftYaHei;
              font-size: 24px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 20px;
              letter-spacing: 0px;
              color: #ffffff;
            }
          }
        }

      }
    }

  }
  @media screen and (max-width:800px){
    .body {
      margin: 0;
      padding: 0;
      height: 100%;
      background-image: url("../../assets/khImg/beijing.jpg");
      background-size: cover;

      .topDiv {
        z-index: 10;
        position: fixed;
        left: 0;
        top: 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 63px;
        background-color: #ffffff;
        box-shadow: 0px 1px 6px 0px
        rgba(0, 10, 15, 0.4);
        img {
          display: none;
          margin-left: 40px;
          width:720px;
          height: 67px;
        }
        .el-button {
          margin-right: 60px;
          width: 85px;
          height: 40px;
          background-color: #0186d1;
          border-radius: 6px;
          font-family: MicrosoftYaHei;
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #ffffff;
        }
      }
      .divbottom {
        /*position: relative;*/
        height: 100%;
        width: 100%;
        .neirong {
          position: absolute;
          margin: auto;
          top: 0; left: 0; bottom: 0; right: 0;
          width: 100%;
          height: 80%;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          .neirongdivHG {
            width: 90%;
            height: 25%;
            background-color: #ffffff;
            border-radius: 16px;
            margin-bottom: 0.5em;
            margin-right: 0px;
            margin-top: 0.5em;
            .shang {
              height: 2rem;
              width: 100%;
              text-align: center;
              line-height: 45px;
              font-family: MicrosoftYaHei-Bold;
              font-size: 15px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #000000;
            }
            .zhong {
              margin-top: 0px;
              text-align: center;
              img {
                width: 3em;
                height: 3em;
              }
            }
            .xia {
              margin-top: 0px;
              text-align: center;
              .el-button{
                width: 49%;
                height: 40px;
                background-color: #0186d1;
                border-radius: 16px;
                font-family: MicrosoftYaHe;
                font-size: 18px;
                font-weight: normal;
                font-stretch: normal;
                line-height: 20px;
                letter-spacing: 0px;
                color: #ffffff;
              }
            }
          }
          .neirongdiv {
            width: 90%;
            height: 25%;
            background-color: #ffffff;
            border-radius: 16px;
            margin-bottom: 0.5em;
            margin-right: 0px;
            margin-top: 0.5em;
            .shang {
              height: 2rem;
              width: 100%;
              text-align: center;
              line-height: 45px;
              font-family: MicrosoftYaHei-Bold;
              font-size: 15px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #000000;
            }
            .zhong {
              margin-top: 0px;
              text-align: center;
              img {
                width: 3em;
                height: 3em;
              }
            }
            .xia {
              margin-top: 0px;
              text-align: center;
              .el-button{
                width: 49%;
                height: 40px;
                background-color: #0186d1;
                border-radius: 16px;
                font-family: MicrosoftYaHe;
                font-size: 18px;
                font-weight: normal;
                font-stretch: normal;
                line-height: 20px;
                letter-spacing: 0px;
                color: #ffffff;
              }
            }
          }

        }
      }

    }
  }


</style>
